<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/searchProduct.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/cartChange.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../css/mouseEventInform.css" type="text/css" media="screen" />

    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>JPetStore Demo</title>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css"
              media="screen" />

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>JPetStore Demo</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>

<header th:fragment="header">
<div id="Header">

    <div id="Logo">
        <div id="LogoContent">
            <a href="/main/enter"><img src="../images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <!--<a th:href="${'/cart/viewCart?account='}+${account}">-->
            <a href="/cart/viewCart">
            <img align="middle" name="img_cart" src="../images/cart.gif" /></a> <img align="middle" src="../images/separator.gif" />
                <a th:unless = "${account != null}" href="/account/SignonForm">Sign In</a>

                <a th:if = "${account != null}" href="/account/signout">Sign Out</a>
                <!---signOff-->

            <!--???-->
                <img th:if = "${account != null}" align="middle" src="../images/separator.gif" />
                <a th:if = "${account != null}" href="/account/myAccount">My Account</a>
                <img align="middle" src="../images/separator.gif" />
                <a th:if = "${account != null}" href="/order/ViewListOrder">My Orders</a>
                <img th:if = "${account != null}" align="middle" src="../images/separator.gif" />
                <a href="/main/JPetStoreDemo">?</a>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <form action="/category/SearchProducts" method="post" id="search1">
                <input type="text" id="keyword" name="keyword" size="14"/>
                <div class="auto hidden" id="auto">
                    <!--<div class="auto_out">1</div>
                    <div class="auto_out">2</div>-->
                </div>
                <input type="submit" name="search" value="Search" />
                <script>
                    $('#keyword').on('input propertychange',function (){
                        var $this = $(this);
                        var $auto = $('#auto');
                        if ($this.val() != null){
                            $.ajax({
                                //url
                                url: 'http://localhost:8088/category/searchProductsAjax',
                                //????
                                data: {
                                    keyword: $this.val()
                                },
                                //????
                                type: 'GET',
                                //?????
                                dataType: 'json',
                                //??????data???????????????
                                success: function(data){
                                    console.log(data);
                                    $auto.empty();
                                    $.each(data,function (i,ele){
                                        var $div = $('<div class="auto_out"><a href="javascript:;">' + ele["name"] + '</a></div>')
                                        $auto.append($div);
                                    });
                                    $auto.removeClass('hidden');
                                    $.each($('.auto_out'),function (i,ele){
                                        $('.auto_out').click(function (){
                                            $('#keyword').val($(this).text());
                                            //????????????
                                            $("#search1").submit();
                                        })
                                    });
                                },
                                //?????
                                error: function(){
                                    alert("??????????");
                                }
                            })
                        }else {
                            $auto.addClass('hidden');
                        }
                    })
                </script>
                <!--<script src="../js/searchProduct.js"></script>-->
            </form>
        </div>
    </div>

    <div id="QuickLinks">
        <a href="/category/viewCategory?categoryId=FISH"><img
                src="../images/sm_fish.gif" />
        </a> <img src="../images/separator.gif" />
        <a href="/category/viewCategory?categoryId=DOGS&"><img
                src="../images/sm_dogs.gif" />
        </a> <img src="../images/separator.gif" />
        <a href="/category/viewCategory?categoryId=REPTILES"><img
                src="../images/sm_reptiles.gif" />
        </a> <img
            src="../images/separator.gif" />
        <a href="/category/viewCategory?categoryId=CATS"><img
                src="../images/sm_cats.gif" />
        </a> <img src="../images/separator.gif" />
        <a href="/category/viewCategory?categoryId=BIRDS"><img
                src="../images/sm_birds.gif" />
        </a>
    </div>
</div>
</header>
</body>
</html>